import React from 'react';
import { inject, observer } from 'mobx-react';
import { Popover } from 'antd';
import { WeaIntro } from 'ecCom';

import E9TopMenuContent from '../E9TopMenuContent';

const { Step, Intro } = WeaIntro;

@inject('portalIntroStore')
@inject('portalThemeStore')
@observer
class IntroStep1 extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
  }

  render() {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { intro_step } = portalIntroStore;
    const { topMenuObj = {}, topMenuVisible, translatepage } = portalThemeStore;
    const { topMenuSelected = {} } = topMenuObj;
    const { name: selectedName, fname: tran_selectedName } = topMenuSelected;

    return (
      <Popover
        ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@hmhmuq`}
        trigger="hover"
        placement="bottomLeft"
        content={
          <Step ecId={`${(this && this.props && this.props.ecId) || ''}_Step@pp6y2s`} id="portal-intro1">
            <E9TopMenuContent ecId={`${(this && this.props && this.props.ecId) || ''}_E9TopMenuContent@dkhawp`} onVisibleChange={this.onVisibleChange} />
          </Step>
        }
        overlayClassName={translatepage == '1' ? 'e9header-top-menu-overlay-tran' : 'e9header-top-menu-overlay'}
        visible={topMenuVisible}
        onVisibleChange={this.onVisibleChange}
        afterPopupVisibleChange={(v) => intro_step.intro1 && v && setTimeout(() => window.portal_intro.start(), 500)}
      >
        <div>
          <div className="e9header-top-menu-icon">
            <i className="wevicon-top-menu-common" />
          </div>
          <div className="e9header-top-menu-name wea-f14" title={translatepage == '1' ? tran_selectedName : selectedName}>
            {translatepage == '1' ? tran_selectedName : selectedName}
          </div>
          <Intro
            ecId={`${(this && this.props && this.props.ecId) || ''}_Intro@bsy0gz`}
            onReady={(intro) => {
              window.portal_intro = intro;
              portalIntroStore.getPortalIntroInfo(portalThemeStore);
            }}
          />
        </div>
      </Popover>
    );
  }

  onVisibleChange(visible) {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { intro_step } = portalIntroStore;
    !intro_step.intro1 && portalThemeStore.onTopMenuVisibleChange(visible);

    const themeLayoutMask = document.getElementById('themeLayoutMask');
    if (visible) {
      themeLayoutMask.style.display = 'block';
      portalThemeStore.onFreqUseMenuVisibleChange(false);
      portalThemeStore.onQuickSearchTypesVisibleChange(false);
      portalThemeStore.onQuickSearchRcmdVisibleChange(false);
      portalThemeStore.onToolbarMoreMenuVisibleChange(false);
      portalThemeStore.onAccountVisibleChange(false);
    } else {
      themeLayoutMask.style.display = 'none';
    }
  }
}

export default IntroStep1;
